//------------------------(前端)发送请求------------------------

var searchBtn=document.querySelector('.inputbox button')
var inputEle=document.querySelector('.inputbox input')
//点击搜索按钮，发送ajax请求，传参数给服务器，服务器端返回搜索的结果
searchBtn.onclick=()=>{
    axios.get('/user/search', {params:{searchkey:inputEle.value}}).then((res)=>{
        console.log(res.data);
        render(res.data.list)
    })
}








//前端发请求，后端返回数据，前端拿到数据进行渲染

//渲染表格数据
function render(data) {
    var str = ''
    //用data.map去遍历，拿到他里的每个元素，转换成要渲染的标签

    var str = data.map((item, index) => {
        return `<tr>
                <td>${item.email}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.ingroup}</td>
                <td>${item.isadmin ? '是' : '否'}</td>
                <td> <span class="${item.status ? '' : 'error'}">${item.status ? '正常' : '异常'}</span> </td>
                <td> <span class='iconfont icon-bianji'></span> <span  class='iconfont icon-shanchu'></span> </td>
            </tr>`
    }).join('')
    if(str==''){str='<p style="color:red;">未查询到数据！</p>'}
    document.querySelector('tbody').innerHTML = str;
}







//axios是从axios.min.js文件中暴露的 用来发送Ajax请求的一个对象
//前端index.js*static文件中的axios.get()发送的get请求地址与后端接口的地址一样时，后端index.js*11.21kt文件中的app.get(url)即可处理前端axios.get()发送过来的请求
//所以前端发送的请求方式和请求地址必须和后端能对应上
//{params:{page:1,count:10}===如果get请求携带参数，则在接收的时候通过req.query来接收

axios.get('/user/list', { params: { page: 1, count: 2 } }).then((res) => {
    render(res.data.list)//要拿到数组往进传，data不是数组，data.list是数组，可以调map方法
    console.log(res.data);
})
//get请求与post请求携带的参数写法是不一样的
//{phone:'13611129070',pass:'1234'}===如果post请求携带参数，则在接收的时候通过req.body来接收
axios.post('/user/login', { phone: '13611129070', pass: '1234' }).then((res) => {
    console.log(res.data);

})
// axios.post()
// axios.put()
// axios.delete()
